<template>
	<view class="wrap u-p-t-80 u-p-r-40 u-p-l-40">
		<view class="title">修改密码</view>
		
		<u-field v-model="oldPassword" label="原密码" placeholder="旧密码" required :error-message="oldPwdMsg" password></u-field>
		<u-field v-model="newPassword" label="新密码" placeholder="新密码" required :error-message="newPwdMsg" password></u-field>
		<u-field v-model="renewPassword" label="确认密码"  placeholder="请确认新密码" required password :error-message="reNewPwdMsg"></u-field>
		<button @tap="submit" :loading="submitBtn" :disabled="submitBtn" :style="[inputStyle]" class="getCaptcha">修改密码</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 用户修改密码参数
				oldPassword: "",
				
				newPassword: "",
				renewPassword: "",
				submitBtn:false,
			};
		},
		computed:{
			inputStyle() {
				let style = {};
				// 全部验证通过，激活注册
				if(this.oldPassword && this.newPassword && this.renewPassword && this.newPassword==this.renewPassword) {
					style.color = "#fff";
					style.backgroundColor = this.$u.color['warning'];
				}
				return style;
			},
			oldPwdMsg(){
				if(!this.email){
					return ''
				}
				if(!this.$u.test.rangeLength(this.oldPassword,[6,16])){
					return '原密码长度需在6-16位'
				}else{
					return ''
				}
				
			},
			newPwdMsg(){
				if(!this.newPassword){
					return ''
				}
				if(!this.$u.test.rangeLength(this.newPassword,[6,16])){
					return '新密码长度需在6-16位'
				}else if(this.newPassword === this.oldPassword){
					return '新密码不能与旧密码相同'
				}else{
					return ''
				}
			},
			reNewPwdMsg(){
				if(this.newPassword!==this.renewPassword ){
					return '两次密码不一致'
				}else{
					return ''
				}
			}
		},
		methods: {
			async toUpdatePwd() {
				try{
					
					//修改btn样式
					this.submitBtn=true
					// 准备提交参数
					const params = {
						username: this.vuex_user.username,
						
						oldPassword: this.oldPassword,
						newPassword: this.newPassword
					}
					// console.log(params)
					// 修改密码接口
					const regRes = await this.$u.api.updatePwd(params)
					this.submitBtn=false
					// 修改成功，重定向到登录（关闭修改页面）
					this.$u.toast('修改成功！请重新登录!')
					// 延时跳转
					setTimeout(()=>{
						this.$u.route({
							type:"redirect",
							url:"/pages/auth/login",
							params:{account:this.vuex_user.username}
						})
						//清除缓存的token和用户信息
						this.$u.vuex('vuex_token',null)
						this.$u.vuex('vuex_user',{nickName: '欢迎登录咚咚图书商城'})
					},1500)
				}catch(e){
					this.submitBtn=false
				}
			},
			submit(){
				
				if(this.oldPassword && this.newPassword && this.renewPassword && this.newPassword==this.renewPassword){
					this.toUpdatePwd()
					
				}else{
					console.log("111")
					return false
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.wrap{
	.title {
		text-align: left;
		font-size: 60rpx;
		font-weight: 500;
		margin-bottom: 100rpx;
	}
	.getCaptcha {
		background-color: rgb(253, 243, 208);
		color: $u-tips-color;
		border: none;
		font-size: 30rpx;
		padding: 12rpx 0;
		
		&::after {
			border: none;
		}
	}
}
</style>
